<style lang="scss" scoped>
#cmain {
  .cmain-content {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 10px;
    padding: 10px 30px 30px 30px;
    box-shadow: 0 0 10px 0 #cfcfcf;
    .camin-table {
      position: relative;
    }
    .cmain-title {
      height: 28px;
      line-height: 28px;
      color: #666;
      font-size: 16px;
      font-weight: 800;
      border-bottom: 1px solid #dcdfe6;
    }
    .button-menu {
      padding: 20px 0 10px 0;
      button {
        margin-right: 20px;
      }
    }
  }
  .pageation {
    height: 32px;
    padding: 15px 0;
  }
}

.analyticRetModel {
  .ivu-modal {
    .ivu-row {
      .ivu-col {
        margin-top: 14px;
        color: #666;
        font-size: 14px;
      }
    }
  }
}

.bottomBtn {
  padding: 20px 0 10px 0;
  border-top: 1px solid #dcdfe6;
  overflow: hidden;
  button {
    // width: 80px;
    float: right;
  }
}

.page-footer {
  padding: 5px 0;
}

.hpo {
  margin-top: 10px;
  .process_index {
    width: 280px;
  }
}

//家系图
.familyTreeModel {
  .family-content {
    width: 100%;
    height: 500px;
    border: 1px solid #ccc;
    margin-top: 10px;
  }
}
</style>
<template>
  <div id="cmain">
    <div class="cmain-content">
      <p class="cmain-title">筛选条件</p>

      <div class="button-menu">
        <Button @click="showModel" size="small" type="primary">病人信息</Button>
        <Button type="primary" @click="showFamilyTree" :loading="treeLoading" size="small">家树图谱</Button>
        <Button style="float:right;" size="small" @click="saveFilter" type="primary">保存筛选条件</Button>
        <Button style="float:right;" size="small" @click="clearFilter" type="primary">清空筛选条件</Button>
        <Button style="float:right;" size="small" type="primary" @click="viewReport">报告预览</Button>
        <Button type="primary" size="small" style="float:right;" @click='onBtExport'>导出csv</Button>
      </div>
      <div class="camin-table ctLoading">
        <warn style="z-index:2;" v-if="isWarnShow" @callback="initAgGrid"></warn>
        <ag-grid-vue id="aggrid" class="ag-theme-balham" style="width:100%; height: 560px;" :suppressDragLeaveHidesColumns='true' :overlayLoadingTemplate="loadTemp" :overlayNoRowsTemplate="nowRowTemp" :suppressPaginationPanel='true' :enableSorting="true" :enableFilter="true" :enableColResize="true" :gridOptions="gridOptions" :gridReady="onGridReady" :showToolPanel="true">
        </ag-grid-vue>
        <div v-if="!isWarnShow" style='float: right;margin:10px 0;'>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageIndex" :page-sizes="sizeList" :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
      </div>
      <div style="clear:both;"></div>
      <div class='hpo'>
        <Form :label-width="90">
          <FormItem label="HPO词条输入">
            <hpolist @update='hpoupdate'></hpolist>
            <Button type="primary" @click='renote' size="small" style="float:left;margin-left:30px;margin-top:8px;display:inline-block" :disabled='disupchpo'>重新注释</Button>
          </FormItem>
        </Form>
      </div>
    </div>
    <Modal class="analyticRetModel" style="width:200px" v-model="patientInfoModel" title="病人信息">
      <Row>
        <Col span="4">病人编号:</Col>
        <Col span="4" v-text="patientInfo.patientcode"></Col>
        <Col span="4">&nbsp;</Col>
        <Col span="4">病人姓名:</Col>
        <Col span="4" v-text="patientInfo.patientname"></Col>
      </Row>
      <Row>
        <Col span="4">出生日期:</Col>
        <Col span="4" v-text="patientInfo.birthday"></Col>
        <Col span="4">&nbsp;</Col>
        <Col span="4">性别:</Col>
        <Col span="4" v-text="getGender(patientInfo.gender)"></Col>
      </Row>
      <Row>
        <Col span="4">血缘关系:</Col>
        <Col span="4" v-html="patientInfo.consanguinity ? patientInfo.consanguinity :'&nbsp'"></Col>
        <Col span="4">&nbsp;</Col>
        <Col span="4">民族:</Col>
        <Col span="4" v-text="patientInfo.nation"></Col>
      </Row>
      <Row>
        <Col span="4">临床描述:</Col>
      </Row>
      <Row>
        <Col v-text="patientInfo.clinicalinf">
        </Col>
      </Row>
      <div slot="footer"></div>
    </Modal>
    <Modal class="analyticRetModel" v-model="diseaseMarkModel" title="标记" @on-ok="saveMark" @on-cancel="cancal" width="750px">
      <Row>
        <Col span="3" style="text-align:right">致病性：</Col>
        <Col span="1"></Col>
        <Col span="20">
        <el-radio-group v-model="descModel.pathogenicity" size="small">
          <el-radio @click.native.prevent="clickitem('致病的')" label="致病的" border>致病的</el-radio>
          <el-radio @click.native.prevent="clickitem('可能致病的')" label="可能致病的" border>可能致病的</el-radio>
          <el-radio @click.native.prevent="clickitem('致病性不明确的')" label="致病性不明确的" border>致病性不明确的</el-radio>
          <el-radio @click.native.prevent="clickitem('可能良性的')" label="可能良性的" border>可能良性的</el-radio>
          <el-radio @click.native.prevent="clickitem('良性的')" label="良性的" border>良性的</el-radio>
        </el-radio-group>
        </Col>
      </Row>
      <Row>
        <Col span="3" style="text-align:right">表型相关性：</Col>
        <Col span="1"></Col>
        <Col span="20">
        <el-radio-group v-model="descModel.phenotypic" size="small">
          <el-radio @click.native.prevent="clickitem2('高度')" label="高度" border>高度</el-radio>
          <el-radio @click.native.prevent="clickitem2('中度')" label="中度" border>中度</el-radio>
          <el-radio @click.native.prevent="clickitem2('低度')" label="低度" border>低度</el-radio>
          <el-radio @click.native.prevent="clickitem2('不相关')" label="不相关" border>不相关</el-radio>
        </el-radio-group>
        </Col>
      </Row>
      <Row>
        <Col span="3" style="text-align:right">遗传模式：</Col>
        <Col span="1"></Col>
        <Col span="20">
        <el-checkbox-group v-model="descModel.heredity" size="small">
          <el-checkbox label="常染色体显性遗传" border>常染色体显性遗传</el-checkbox>
          <el-checkbox label="常染色体隐性遗传" border>常染色体隐性遗传</el-checkbox>
          <el-checkbox label="伴X染色体隐性遗传" border>伴X染色体隐性遗传</el-checkbox>
          <el-checkbox label="伴X染色体显性遗传" border style='margin-top: 13px;margin-left: 0;'>伴X染色体显性遗传</el-checkbox>
          <el-checkbox label="伴Y染色体遗传" border style='margin-top: 13px;'>伴Y染色体遗传</el-checkbox>
          <el-checkbox label="线粒体遗传" border style='margin-top: 13px;'>线粒体遗传</el-checkbox>
          <el-checkbox label="目前不明" border style='margin-top: 13px;'>目前不明</el-checkbox>
        </el-checkbox-group>
        </Col>
      </Row>
      <el-checkbox-group v-model="descModel.checks" size="small">
        <Row>
          <Col span="3" style="text-align:right">其他：</Col>
          <Col span="1"></Col>
          <Col span="4">
          <el-checkbox label="OMIM编号" border>OMIM编号</el-checkbox>
          </Col>
          <Col span="16" v-text="diseaseMarkInfo.phenotype_Mim"></Col>
        </Row>
        <Row>
          <Col span="4"></Col>
          <Col span="4">
          <el-checkbox label="HPO词条" border>HPO词条</el-checkbox>
          </Col>
          <Col span="16" id="hpoContent">
          <span v-if="chpoModelList && chpoModelList.length == 1">{{chpoModelList[0]}}</span>
          <div v-if="chpoModelList && chpoModelList.length > 1">
            <span style="display:block" v-if="!hpoStatus">{{chpoModelList[0]}}</span>
            <a @click="changeStatus" v-if="!hpoStatus" href="javascript:void(0)">...展开</a>
            <span v-if="hpoStatus">
              <span style="display:block" v-for="(item,key) in chpoModelList" :key="key">{{item}}</span>
            </span>
            <a @click="changeStatus" v-if="hpoStatus" href="javascript:void(0)">收起</a>
          </div>
          </Col>
        </Row>
        <Row>
          <Col span="4"></Col>
          <Col span="4">
          <el-checkbox label="疾病名称" border>疾病名称</el-checkbox>
          </Col>
          <Col span="16" v-text="diseaseMarkInfo.disease"></Col>
        </Row>
        <Row>
          <Col span="4"></Col>
          <Col span="4">
          <el-checkbox label="疾病描述" border>疾病描述</el-checkbox>
          </Col>
          <Col span="16" v-text="diseaseMarkInfo.description">

          </Col>
        </Row>
      </el-checkbox-group>
      <Row>
        <Col span="3" style="text-align:right">结果解读：</Col>
        <Col span="1"></Col>
        <Col span="20">
        <Input v-model="descModel.text" type="textarea" :rows="4" placeholder="自由文本..."></Input>
        </Col>
      </Row>
    </Modal>
    <Modal class="familyTreeModel" width="800" v-model="familyTreeModel" title="家系图" @on-cancel="familyCancel">
      <el-row type="flex" justify="end">
        <el-col :span="4">
          <Button style="float:right;" size="small" @click="drawFamilyTree" type="primary">绘制家系图</Button>
        </el-col>
      </el-row>
      <div class="family-content">
        <div v-if="!ishaveFaimlyTree" style="width:140px;height:24px;top:0;left:0;bottom:0;right:0;margin:auto;position:absolute;">
          <img style="display:block;float:left;" src="/static/icon/add.png" />
          <span style="display:block;float:left;margin-top:3px;margin-left:10px;">暂无数据，请创建</span>
        </div>
        <family v-if="ishaveFaimlyTree" :hiddenDom="true" edtype="edit" :familyid="familyTreeId"></family>
      </div>
      <div slot="footer"></div>
    </Modal>
    <!--重新注释提示-->
    <Modal v-model="Tocommit" title="重新注释提示" width="300" :mask-closable="false">
      <p style="padding:20px;text-align:center;font-size:18px;">信息未保存确定重新注释？</p>
      <div slot='footer' class='tip-footer'>
        <Button type="ghost" @click="backCancel">取消</Button>
        <Button type="primary" @click="backClick">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
//引入 agGrid
import "../../../node_modules/ag-grid/dist/styles/ag-grid.css";
import "../../../node_modules/ag-grid/dist/styles/ag-theme-balham.css";

import "ag-grid-enterprise";
import { data, familyTree } from "api/index.js";
import hpolist from "@/components/hpo.vue";
import { setCookie, getCookie, delCookie } from "@/common/js/cookie.js";
import { AgGridVue } from "ag-grid-vue";
import hetHom from "@/components/hetHome.vue";
import customHeaderComponent from "@/components/customHeader.vue";
import family from '@/components/familyTree';
import warn from "@/components/warn.vue";
let that;

export default {
  name: "analytic",
  data() {
    return {
      treeLoading: false,
      familyTreeModel: false,
      ishaveFaimlyTree: false,
      familyTreeId: "",
      isHasDraw: "",
      patientName: "",
      patientSex: "",
      fullscreenLoading: false,
      isWarnShow: false,
      sizeList: [1000, 2000, 5000, 10000],
      PageSize: 1000,
      pageIndex: 1,
      hpoStatus: false, //hpo展开状态
      loadTemp:
      '<div class="el-loading-mask" style="z-index: 2000;"><div class="el-loading-spinner"><svg viewBox="25 25 50 50" class="circular"><circle cx="50" cy="50" r="20" fill="none" class="path"></circle></svg><p class="el-loading-text">数据加载中，请稍后</p></div></div>',
      nowRowTemp: "<div>无数据</div>",
      Tocommit: false,
      total: 0,
      gridOptions: {},
      patientInfoModel: false, //病人信息弹窗
      patientInfo: {}, //病人信息
      columnDefs: [],
      rowData: [],
      diseaseMarkModel: false, //标记信息弹窗
      diseaseMarkInfo: {
        //标记信息
        descModel: {
          pathogenicity: "",
          phenotypic: "",
          heredity: [],
          checks: [],
          text: ""
        }
      },
      descModel: {
        pathogenicity: "",
        phenotypic: "",
        heredity: [],
        checks: [],
        text: ""
      },
      currentRow: {},
      related: [],
      relatedValue: [],
      chpoModelList: [],
      oldchpoModelList: [],
      patientId: "",
      productId: "",
      disupchpo: false,
    };
  },
  beforeMount() {
    this.columnDefs = [
      {
        headerName: "标记",
        children: [
          {
            headerName: "",
            width: 60,
            field: "checked",
            cellRendererFramework: "MarkComponent"
          }
        ]
      },
      {
        headerName: "基因及变异位点信息",
        children: [
          {
            headerName: "基因名称",
            field: "Ref_Gene",
            width: 100,
            title: "show",
            cellRendererFramework: "geneCell",
            tooltipField: "Ref_Gene",
            filter: "agTextColumnFilter"
          },
          {
            headerName: "染色体位置",
            field: "chrAndRef_Pos",
            width: 150,
            tooltipField: "chrAndRef_Pos",
            filter: "agTextColumnFilter"
          },
          {
            headerName: "碱基改变",
            field: "Base_change",
            width: 100,
            tooltipField: "Base_change",
            filter: "agTextColumnFilter"
          },
          {
            headerName: "NAchange",
            field: "NAChange",
            columnGroupShow: "open",
            width: 150,
            tooltipField: "NAChange",
            filter: "agTextColumnFilter"
          },
          {
            headerName: "rs号",
            field: "avsnp150",
            columnGroupShow: "open",
            width: 100,
            tooltipField: "avsnp150",
            filter: "agTextColumnFilter"
          },
          {
            headerName: "合子类型",
            field: "genoType",
            columnGroupShow: "open",
            width: 100,
            // cellRendererFramework: hetHom,
            tooltipField: "genoType",
            filter: "agTextColumnFilter"
          },
          {
            headerName: "Gene.ensGene",
            field: "Gene_ensGene",
            columnGroupShow: "open",
            width: 150,
            tooltipField: "Gene_ensGene",
            headerTooltip: "Gene.ensGene",
            filter: "agTextColumnFilter"
          }
        ]
      },
      {
        headerName: "变异危害性",
        children: [
          // {
          //     headerName: "变异危害性评估",
          //     width: 100,
          //     headerTooltip: "变异危害性评估",
          //     filter: 'agSetColumnFilter',
          //     selectAllOnMiniFilter:true,
          // }, {
          //     headerName: "变异位置",
          //     field: "func_RefGene",
          //     width: 150,
          //     tooltipField: "func_RefGene",
          //     filter: 'agSetColumnFilter'
          // },
          {
            headerName: "变异类型",
            field: "ExonicFunc_refGene",
            width: 150,
            tooltipField: "ExonicFunc_refGene",
            filter: "agSetColumnFilter"
          },
          {
            headerName: "InterVar",
            headerComponentFramework: "customHeaderComponent",
            field: "InterVar_and_Evidence",
            width: 200,
            tooltipField: "InterVar_and_Evidence",
            filter: "agTextColumnFilter"
          },
          {
            headerName: "SIFT_pred",
            field: "SIFT_pred",
            width: 100,
            tooltipField: "SIFT_pred",
            filter: "agTextColumnFilter"
          },
          {
            headerName: "Polyphen2_HDIV_pred",
            field: "Polyphen2_HDIV_pred",
            width: 130,
            tooltipField: "Polyphen2_HDIV_pred",
            headerTooltip: "Polyphen2_HDIV_pred",
            filter: "agTextColumnFilter"
          },
          {
            headerName: "MutationTaster_pred",
            field: "MutationTaster_pred",
            columnGroupShow: "open",
            width: 100,
            tooltipField: "MutationTaster_pred",
            headerTooltip: "MutationTaster_pred",
            filter: "agTextColumnFilter"
          },
          {
            headerName: "GTEx_V6_tissue",
            field: "GTEx_V6_tissue",
            columnGroupShow: "open",
            width: 100,
            tooltipField: "GTEx_V6_tissue",
            headerTooltip: "GTEx_V6_tissue",
            filter: "agTextColumnFilter"
          },
          {
            headerName: "Hi_score",
            field: "Hi_score",
            columnGroupShow: "open",
            width: 100,
            tooltipField: "Hi_score",
            filter: "agNumberColumnFilter"
          }
        ]
      },
      {
        headerName: "表型相关性",
        children: [
          {
            headerName: "亿昊打分",
            field: "UniteVar_score",
            width: 100,
            tooltipField: "UniteVar_score",
            filter: "agNumberColumnFilter"
          },
          {
            headerName: "ClinVar",
            field: "CLINSIG",
            width: 150,
            tooltipField: "CLINSIG",
            filter: "agTextColumnFilter"
          },
          {
            headerName: "OMIM",
            field: "Phenotype_MIM",
            width: 150,
            tooltipField: "Phenotype_MIM",
            headerTooltip: "Phenotype_MIM",
            filter: "agTextColumnFilter"
          },
          {
            headerName: "OrphaNumber",
            field: "OrphaNumber",
            columnGroupShow: "open",
            width: 150,
            tooltipField: "OrphaNumber",
            filter: "agTextColumnFilter"
          },
          {
            headerName: "Yihaosou_score",
            field: "Yihaosou_score",
            columnGroupShow: "open",
            width: 100,
            tooltipField: "Yihaosou_score",
            headerTooltip: "Yihaosou_score",
            filter: "agTextColumnFilter"
          },
          {
            headerName: "Disease",
            field: "Disease",
            columnGroupShow: "open",
            width: 100,
            tooltipField: "Disease",
            filter: "agTextColumnFilter"
          },
          {
            headerName: "Description",
            field: "Description",
            columnGroupShow: "open",
            width: 100,
            tooltipField: "Description",
            filter: "agTextColumnFilter"
          },
          {
            headerName: "Inheritance",
            headerComponentFramework: "customHeaderComponent",
            field: "Inheritance",
            columnGroupShow: "open",
            width: 200,
            tooltipField: "Inheritance",
            filter: "agTextColumnFilter"
          }
        ]
      },
      {
        headerName: "人群频率",
        children: [
          {
            headerName: "1000g2015aug_all",
            field: "1000g2015aug_all",
            width: 60,
            tooltipField: "1000g2015aug_all",
            headerTooltip: "1000g2015aug_all",
            filter: "agNumberColumnFilter"
          },
          {
            headerName: "gnomAD_genome_ALL",
            field: "gnomAD_genome_ALL",
            width: 60,
            tooltipField: "gnomAD_genome_ALL",
            headerTooltip: "gnomAD_genome_ALL",
            filter: "agNumberColumnFilter"
          },
          {
            headerName: "gnomAD_genome_EAS",
            field: "gnomAD_genome_EAS",
            width: 60,
            tooltipField: "gnomAD_genome_EAS",
            headerTooltip: "gnomAD_genome_EAS",
            filter: "agNumberColumnFilter"
          }
        ]
      },
      {
        headerName: "质控",
        children: [
          {
            headerName: "质控",
            field: "QC_status",
            width: 100,
            tooltipField: "QC_status",
            filter: "agSetColumnFilter"
          }
        ]
      },
      {
        headerName: "相关样本",
        children: [
          // {
          //     headerName: "父亲",
          //     field: "father",
          //     width: 100
          // },
          // {
          //     headerName: "母亲",
          //     field: "mother",
          //     width: 100
          // }
        ]
      }
    ];
  },
  methods: {
    //显示家系图
    showFamilyTree() {
      let obj = {
        patientid: this.patientId,
        userid: getCookie("userid")
      }
      this.treeLoading = true;
      familyTree.getNewfamilyTree(obj).then(res => {
        if (res.returnCode == 0 || res.returnCode == 200) {
          this.familyTreeModel = true;
          if (res.data) {
            this.familyTreeId = res.data.familyTreeId;
            this.isHasDraw = res.data.hasDrawn;
            this.ishaveFaimlyTree = res.data.hasDrawn;
            this.patientName = res.data.patientName ? res.data.patientName : "";
            this.patientSex = res.data.gender ? res.data.gender : "";
          };
        } else {
          this.$Message.error(res.msg)
        }
        this.treeLoading = false;
      }).catch(error => {
        this.treeLoading = false;
      });
    },
    //取消弹窗
    familyCancel() {
      this.ishaveFaimlyTree = false;
    },
    //去绘制家系图
    drawFamilyTree() {
      if (this.isHasDraw) {
        window.open("/drawMain?familyTreeId=" + this.familyTreeId + "&drawState=edit&patientId=" + this.patientId + "");
      } else {
        window.open("/drawIndex?familyTreeId=" + this.familyTreeId + "&patientId=" + this.patientId + "&patientName=" + encodeURI(encodeURI(this.patientName)) + "&patientSex=" + encodeURI(encodeURI(this.patientSex)) + "");
      }
    },
    //报告预览
    viewReport() {
      let obj = {
        patientid: this.patientId
      };
      data.reportflag(obj).then(res => {
        console.log(res);
        if (res.returnCode == 706) {
          var a = document.createElement("a");
          a.setAttribute("target", "_blank");
          if (res.data && this.productId == "1") {
            this.$store.state.reportFlag = res.data;
            if (res.data == "阳性") {
              a.setAttribute(
                "href",
                "/reportflagSon?patientid=" + this.patientId + ""
              );
              // this.$router.push('/reportflagSon');
            } else if (res.data == "阴性") {
              a.setAttribute(
                "href",
                "/reportflagY?patientid=" + this.patientId + ""
              );
              // this.$router.push('/reportflagY');
            }
          } else if (res.data && this.productId == "2") {
            this.$store.state.reportFlag = res.data;
            if (res.data == "阳性") {
              a.setAttribute(
                "href",
                "/tumorSon?patientid=" + this.patientId + ""
              );
              // this.$router.push('/tumorSon');
            } else if (res.data == "阴性") {
              a.setAttribute(
                "href",
                "/tumorY?patientid=" + this.patientId + ""
              );
              // this.$router.push('/tumorY');
            }
          }
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
        } else {
          this.$Message.error(res.msg);
        }
      });
    },
    renote() {
      let obj = {
        patientId: this.patientId,
        chpoModelList: this.$store.state.chpoModelList
      }
      var that = this;
      data.addpatientChpo(obj).then((res) => {
        if (res.returnCode == 0 || res.returnCode == 200) {
          this.uploadAnnoation(this.patientId)
        } else {
          this.$Message.error(res.msg);
        }
      })
    },
    uploadAnnoation(id) {
      let obj = {
        paientId: id, //  "45ec581ef7944f77b691251fb1374e3b"
        type: 6,
        userId: getCookie("userid"),
        productId: this.productId
      };
      data.uploadAnnoation(obj).then(res => {
        if (res.returnCode == 0 || res.returnCode == 200) {
          this.$Message.success(res.msg);
        } else {
          this.$Message.error(res.msg);
        }
      });
    },
    // 导出文件
    onBtExport() {
      let patientId = this.patientId
      //console.log(this.gridOptions.api);
      //this.gridOptions.api.exportDataAsCsv();
      data.downFileAsCsv(patientId).then(res => {
        window.open("//" + res.data)
      }).catch(error => {
        this.$Message.error("导出失败")
      })
    },
    //保存筛选条件
    //改变hpo展开状态
    changeStatus() {
      this.hpoStatus = !this.hpoStatus;
    },
    onGridReady(params) {
      this.gridOptions.api = params.api;
    },
    saveFilter() {
      let model = this.gridOptions.api.getFilterModel();
      console.log(JSON.stringify(model));
      let obj = {
        patientId: this.patientId,
        userId: getCookie("userid"),
        filterInfo: model
      };
      this.gridOptions.api.showLoadingOverlay();
      data
        .saveFilterInfo(obj)
        .then(res => {
          console.log(res);
          if (res.returnCode == 0 || res.returnCode == 200) {
            this.$Message.success(res.msg);
          } else {
            this.$Message.error(res.msg);
          }
          this.gridOptions.api.hideOverlay();
        })
        .catch(error => {
          this.$Message.error(error);
        });
    },
    //设置筛选条件
    setFilter(model) {
      this.gridOptions.api.setFilterModel(model);
    },
    clearFilter() {
      let model = {};
      let obj = {
        patientId: this.patientId,
        userId: getCookie("userid"),
        filterInfo: model
      };
      this.gridOptions.api.showLoadingOverlay();
      data
        .saveFilterInfo(obj)
        .then(res => {
          if (res.returnCode == 0 || res.returnCode == 200) {
            this.$Message.success(res.msg);
            this.setFilter({});
          } else {
            this.$Message.error(res.msg);
          }
          this.gridOptions.api.hideOverlay();
        })
        .catch(error => {
          this.$Message.error(error);
        });
    },
    handleCurrentChange(page) {
      this.pageIndex = page;
      this.getSampleExcelByPage();
    },
    handleSizeChange(size) {
      this.PageSize = size;
      this.getSampleExcelByPage();
    },
    getSampleExcelByPage() {
      let obj = {
        patientId: this.patientId, //   this.patientId  
        pageIndex: this.pageIndex,
        pageSize: this.PageSize
      };
      this.gridOptions.api.showLoadingOverlay();
      data
        .getSampleExcelByPage(obj)
        .then(res => {
          if (res.returnCode == 0 || res.returnCode == 200) {
            this.setDesignators(res.data.documentList);
            this.total = res.data.count;
            if (
              res.data.filterInfoModel &&
              res.data.filterInfoModel.filterInfo
            ) {
              var model = res.data.filterInfoModel.filterInfo;
              setTimeout(function() {
                that.setFilter(model);
              }, 0);
            }
          }
          if (res.data.documentList.length <= 0) {
            this.setNoRowsTemp();
            this.gridOptions.api.showNoRowsOverlay();
          } else {
            this.gridOptions.api.hideOverlay();
          }
          this.isWarnShow = false;
        })
        .catch(error => {
          this.isWarnShow = true;
          this.gridOptions.api.hideOverlay();
        });
    },
    cancal() {
      this.descModel = {
        pathogenicity: "",
        phenotypic: "",
        heredity: [],
        checks: [],
        text: ""
      };
    },
    //单选取消选中
    clickitem(e) {
      e === this.descModel.pathogenicity
        ? (this.descModel.pathogenicity = "")
        : (this.descModel.pathogenicity = e);
      $(".el-radio").blur();
    },
    clickitem2(e) {
      e === this.descModel.phenotypic
        ? (this.descModel.phenotypic = "")
        : (this.descModel.phenotypic = e);
      $(".el-radio").blur();
    },
    //返回取消
    backCancel() {
      this.Tocommit = false;
    },
    //返回确定
    backClick() {
      if (this.productId == 1) {
        this.$router.push("/rare");
      } else if (this.productId == 2) {
        this.$router.push("/tumor");
      }
      window.close();
    },
    hpoupdate(list) {
      this.chpoModelList = list;
      var _this = this;
      this.chpoModelList.forEach(function(ele) {
        let aa = ele.substring(0, ele.indexOf("("));
        let bb = ele.substring(ele.indexOf("(") + 1, ele.lastIndexOf(")"));
        let obj = {
          chpo_num: aa,
          chpo_en: null,
          chpo_cn: bb
        };
        _this.oldchpoModelList.push(obj);
      }, this);
      this.back()
    },
    // 数组去重
    heavy(arr) {
      var res = [];
      var json = {};
      for (var i = 0; i < arr.length; i++) {
        if (!json[JSON.stringify(arr[i])]) {
          res.push(arr[i]);
          json[JSON.stringify(arr[i])] = 1;
        }
      }
      return res;
    },
    back() {
      var flag = false; //未修改
      if (this.chpoModelList.length == 0) {
        flag = false;
      } else {
        if (
          this.oldchpoModelList.length ==
          this.$store.state.oldchpoModelList.length
        ) {
          var aaa = this.oldchpoModelList.concat(
            this.$store.state.oldchpoModelList || []
          );
          var bbb = this.heavy(aaa);
          if (bbb.length != this.oldchpoModelList.length) {
            flag = true;
          }
        } else {
          flag = true;
        }
      }
      if (flag == false) {
        // if (this.productId == 1) {
        //   this.$router.push("/rare");
        // } else if (this.productId == 2) {
        //   this.$router.push("/tumor");
        // }
        this.disupchpo = true;
      } else {
        this.disupchpo = false;
      }
    },
    setDesignators(data) {
      console.log(data);
      if (data.length > 0) {
        if (data[0].hasOwnProperty('designators')) {
          this.setColumn(data[0].designators);
        } else {
          this.setColumnlist(data[0])
        }
      }
      this.setRowData(data);
    },
    tran(str) {
      var ret = "";
      var obj = {
        father: "父亲",
        mother: "母亲",
        brother: "兄弟",
        sister: "姐妹",
        grandfather: "祖父",
        grandmother: "祖母",
        uncle: "叔叔",
        fatherSister: "姑姑",
        grandad: "外祖父",
        grandma: "外祖母",
        motherBrother: "舅舅",
        aunt: "姨妈",
        identicalTwins: "同卵双胞胎",
        fraternalTwins: "异卵双胞胎",
        others: "其他"
      };
      ret = obj[str];
      return ret;
    },
    setColumnlist(obj) {
      for (var key in obj) {
        if (/^[\u3220-\uFA29]+$/.test(key) && key != '先证者') {
          var ob = {
            headerTooltip: key,
            headerName: key,
            field: key,
            width: 50,
            // cellRendererFramework: hetHom,
            filter: "agTextColumnFilter"
          }
          this.columnDefs[this.columnDefs.length - 1]["children"].push(ob);
        }
        if (key == '先证者') {
          this.columnDefs[1].children[5] = {
            headerName: "合子类型",
            field: key,
            columnGroupShow: "open",
            width: 100,
            // cellRendererFramework: hetHom,
            tooltipField: key,
            filter: "agTextColumnFilter"
          }
        }
      }
    },
    setColumn(list) {
      this.related = [];
      if (list.length > 0) {
        for (let i = 0; i < list.length; i++) {
          for (let key in list[i]) {
            console.log(key);
            this.related.push(key);
          }
          console.log(this.related);
        }
        var _this = this;
        for (let i = 0; i < this.related.length; i++) {
          let obj = {
            headerTooltip: _this.tran(this.related[i]),
            headerName: _this.tran(this.related[i]),
            field: this.related[i],
            width: 50,
            // cellRendererFramework: hetHom,
            filter: "agTextColumnFilter"
          };
          this.columnDefs[this.columnDefs.length - 1]["children"].push(obj);
        }
      }
    },
    setRowData(data) {
      for (let i = 0; i < data.length; i++) {
        if (this.related.length > 0) {
          for (let j = 0; j < this.related.length; j++) {
            data[i][this.related[j]] =
              data[i].designators[j][[this.related[j]]];
          }
        }

        var n = 0;
        if (data[i].hasOwnProperty("descModel")) {
          for (let key in data[i].descModel) {
            if (
              data[i].descModel[key] === "" ||
              JSON.stringify(data[i].descModel[key]) === "[]"
            ) {
              n += 1;
            }
          }
          if (n < 5) {
            data[i]["checked"] = true;
          } else {
            data[i]["checked"] = false;
          }
        } else {
          data[i]["checked"] = false;
          data[i]["descModel"] = {};
          data[i].descModel["pathogenicity"] = "";
          data[i].descModel["phenotypic"] = "";
          data[i].descModel["heredity"] = [];
          data[i].descModel["checks"] = [];
          data[i].descModel["text"] = "";
        }
        data[i]["chrAndRef_Pos"] = data[i].Chr + ":" + data[i].Ref_pos;
      }
      this.rowData = data;
      this.setNoRowsTemp();
      this.gridOptions.api.setRowData(this.rowData);
      this.gridOptions.api.setColumnDefs(this.columnDefs);
    },
    //设置没有数据的时候 显示文字信息
    setNoRowsTemp() {
      if (this.productId == "1") {
        this.gridOptions.overlayNoRowsTemplate =
          "<div>当前筛选条件下，没有筛选出变异位点</div>";
      } else if (this.productId == "2") {
        this.gridOptions.overlayNoRowsTemplate =
          "<div>未检测到相关基因突变信息</div>";
      }
    },
    showModel() {
      let obj = {
        patientid: this.patientId,
        userId: getCookie("userid"),
        productId: this.productId
      };
      data
        .getProjectDetail(obj)
        .then(res => {
          console.log(res);
          if (res && (res.returnCode == 0 || res.returnCode == 200)) {
            this.patientInfo = res.data.dchPatient;
            this.patientInfoModel = true;
          } else {
            this.$Message.error(res.msg);
          }
        })
        .catch(error => {
          this.$Message.error(error);
        });
    },
    methodFromParent(cell) {
      alert(`"Parent Component Method from ${cell}!`);
    },
    saveMark() {
      this.diseaseMarkInfo["descModel"] = this.descModel;
      console.log(this.diseaseMarkInfo._id)
      delete this.diseaseMarkInfo._id;
      let obj = {
        documentList: [this.diseaseMarkInfo],
        patientId: this.patientId //this.$store.state.patientid
      };
      data
        .updateSampleExcel(obj)
        .then(data => {
          //updateExcel
          var ret = false;
          for (let key in this.diseaseMarkInfo.descModel) {
            var currentValue = this.diseaseMarkInfo.descModel[key];
            if (currentValue && currentValue != "") {
              if (typeof currentValue == "object" && currentValue.length == 0) {
                ret = false;
              } else {
                ret = true;
                break;
              }
            }
          }
          if (ret) {
            this.diseaseMarkInfo.checked = true;
          } else {
            this.diseaseMarkInfo.checked = false;
          }
          this.diseaseMarkInfo.descModel = this.descModel; //深拷贝行
          for (var key in this.diseaseMarkInfo) {
            this.currentRow[key] = this.diseaseMarkInfo[key];
          }
          this.$Message.success("保存成功");
        })
        .catch(error => {
          this.$Message.error("保存失败" + error);
        });
    },
    //获取性别
    getGender(str) {
      if (str == true) {
        return "男";
      } else if (str == false) {
        return "女";
      } else {
        return "";
      }
    },
    reAnnoationByChpo() {
      // this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(() => {
      //   this.$message({
      //     type: 'success',
      //     message: '删除成功!'
      //   });
      // }).catch(() => {
      //   this.$message({
      //     type: 'info',
      //     message: '已取消删除'
      //   });
      // });
      // let obj = {
      //     patientId: this.patientId,
      //     chpoModelList: this.$store.state.chpoModelList
      // }
      // data.reAnnoationByChpo(obj).then((res) => {
      //     if (res.returnCode == 0 || res.returnCode == 200) {
      //             this.$store.state.pageindex = 1;
      //         if (this.$store.state.productId == 1) {
      //             this.$router.push("/rare");
      //         } else if (this.$store.state.productId == 2) {
      //             this.$router.push("/tumor");
      //         }
      //     } else {
      //         this.$Message.error(res.msg)
      //     }
      // })
    },
    filterData() {
      //ref_Gene=BAP1的数据
      let codedFilter = {
        ref_Gene: { type: "equals", filter: "BAP1" }
      };
      this.gridOptions.api.setFilterModel(codedFilter);
      this.gridOptions.api.onFilterChanged();
    },
    doFileChange() {
      var _this = this;
      var productId = this.productId;
      this.gridOptions.onFilterChanged = function() {
        var len = _this.gridOptions.api.getDisplayedRowCount();
        if (len == 0) {
          _this.gridOptions.api.showNoRowsOverlay();
        } else {
          _this.gridOptions.api.hideOverlay();
        }
      };
    },
    initAgGrid() {
      this.getSampleExcelByPage();
      this.gridOptions.defaultColDef = {
        menuTabs: ["filterMenuTab"]
      };
      this.doFileChange();
    }
  },
  mounted() {
    //this.openFullScreen2()
    let agtoolpanel = document.getElementsByClassName("ag-tool-panel")[0];
    let agroot = document.getElementsByClassName("ag-root")[0];
    let agrootwrapper = document.getElementsByClassName(
      "ag-root-wrapper-body ag-layout-normal"
    )[0];
    console.log(agtoolpanel);
    agrootwrapper.insertBefore(agtoolpanel, agroot);
    this.initAgGrid();
  },
  created() {
    that = this;
    this.patientId = M.url().patientId;
    this.productId = M.url().productId;
  },
  components: {
    hpolist,
    AgGridVue,
    warn,
    family,
    customHeaderComponent,
    geneCell: {
      template:
      '<a href="javascript:;" @click="cellMethod" style="color:#337ab7;">{{geneName}}</a>',
      methods: {
        cellMethod() {
          var a = document.createElement("a");
          a.setAttribute("target", "_blank");
          a.setAttribute(
            "href",
            "/rare/check?geneName=" +
            this.geneName +
            "&productId=" +
            M.url().productId +
            ""
          );
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
          // that.$store.state.geneName = this.geneName;
          // that.$router.push('/rare/check')
          // console.log(that.$store.state.geneName)
        }
      },
      data() {
        return {
          geneName: ""
        };
      },
      created() {

        this.geneName = this.params.value;
      }
    },
    MarkComponent: {
      template: '<span @click="markMethod" :class="checkStyle"></span>',
      methods: {
        markMethod() {
          this.params.frameworkComponentWrapper._parent.$parent.diseaseMarkModel = true;
          this.params.frameworkComponentWrapper._parent.$parent.diseaseMarkInfo = M.clone(
            this.params.data
          ); //深拷贝
          this.params.frameworkComponentWrapper._parent.$parent.currentRow = this.params.data; //浅拷贝
          this.params.frameworkComponentWrapper._parent.$parent.descModel = M.clone(
            this.params.data.descModel
          );
        },
        setvalue(params) {
          let hetHom = params.data.checked;
          if (hetHom) {
            this.checkStyle = "selects";
          } else {
            this.checkStyle = "nselects";
          }
        }
      },
      watch: {
        "params.data.checked": function(val, oldval) {
          if (val) {
            this.checkStyle = "selects";
          } else {
            this.checkStyle = "nselects";
          }
        },
        deep: true //深度监听
      },
      data() {
        return {
          checkStyle: "nselects"
        };
      },
      created() {
        this.setvalue(this.params);
      }
    }
  }
};
</script>